<template>
    <!-- 头部 -->
    <van-nav-bar title="注册账号">
      <template #left>
        <van-icon
          name="cross"
          size="25"
          color="#ea5910"
          @click="$router.go(-1)"
        />
      </template>
      <template #right>
        <van-icon class="search" name="search" size="25" @click="searchClick" />
  
        <van-popover
          v-model:show="showPopover"
          :actions="actions"
          theme="dark"
          placement="bottom-end"
        >
          <template #reference>
            <van-icon name="ellipsis" size="25" @click="ellipsisClick" />
          </template>
        </van-popover>
      </template>
    </van-nav-bar>
    <p>欢迎注册周末游App账号</p>
    <!-- 注册主体 -->
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        label="用户名"
        placeholder="请输入用户名"
        :rules="[{ required: true }]"
      />
      <van-field
        v-model="phone"
        label="手机号"
        placeholder="请输入手机号"
        :rules="[{ required: true }, { pattern: phoneReg }]"
        show-error
        @blur="phoneBlu"
      />
      <van-field
        v-model="code"
        center
        clearable
        label="短信验证码"
        placeholder="请输入短信验证码"
        :rules="[{ required: true }, { pattern: codeReg }]"
      >
        <template #button>
          <van-button size="small" type="primary" @click="sendCode"
            >发送验证码</van-button
          >
        </template>
      </van-field>
      <van-field
        v-model="password"
        :type="passwordVisibile"
        label="登录密码"
        placeholder="请输入登录密码"
        right-icon="smile-o"
        @click-right-icon="iconClick"
        @blur="passwordFocus"
        :rules="[
          { required: true, message: '登录密码不能为空' },
          { pattern: passwordReg, message: '请输入正确格式的登录密码' },
        ]"
      />
      <van-field
        v-model="passwordTwo"
        :type="passwordVisibileTwo"
        label="确认密码"
        placeholder="请输入确认密码"
        @blur="passwordTwoBlur"
        right-icon="smile-o"
        @click-right-icon="iconClickTwo"
        :rules="[{ required: true, message: '与登录密码不匹配' }]"
      />
      <div class="twoDiv">
        <router-link to="/login" style="color: red">登录</router-link>
        <router-link to="/findpwd">找回密码</router-link>
      </div>
      <div class="btnbox">
        <van-button type="primary" size="normal" @click="regSubmit"
          >提交</van-button
        >
        <van-button type="primary" size="normal">重置</van-button>
      </div>
    </van-form>
  </template>
  
  <script setup>
  // import { trigger } from "@vue/reactivity";
  import { ref } from "vue";
  import { useRouter } from "vue-router";
  import { sentCode, verifyCode, registerApi, findUserApi } from "../../api/login";
  
  const router = useRouter();
  const username = ref(""); //用户名
  const phone = ref(""); //手机号
  const phoneReg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/; //手机号正则
  const code = ref(""); //验证码
  const codeReg = /[0-9]{4}/; //短信验证码正则
  const password = ref(""); //登录密码
  const flag = ref(false); //登录密码是否可见的开关
  const passwordReg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/; //登录密码正则
  const passwordVisibile = ref("password"); //登录密码是否可见
  const passwordTwo = ref(""); //验证密码
  const flagTwo = ref(false); //确认密码是否可见的开关
  const passwordVisibileTwo = ref("password"); //确认密码是否可见
  const showPopover = ref(false); //右上角省略号是否显示
  const phoneFocus = () => {
    //手机号聚焦
    if (phone.value && phoneReg.test(phone.value)) {
      console.log(213);
    } else {
      console.log(555);
    }
  };
  const sendCode = async () => {
    if (phone.value && phone.value) {
      console.log("验证码");
      const res = await sentCode({
        phone: phone.value,
      });
      console.log(res);
      if (res.data) {
        console.log("验证码发送成功");
      }
    } else {
      console.log("输入手机号");
    }
  };
  const passwordFocus = () => {
    if (password.value && passwordReg.test(password)) {
      console.log("登录密码符合规范");
    } else {
      return false;
    }
  };
  const passwordTwoBlur = () => {
    if (passwordTwoBlur && passwordTwo.value === password.value) {
      console.log("各信息正确");
    } else {
      console.log("信息有误");
      return false;
    }
  };
  const regSubmit = async () => {
    console.log("提交");
    const res = await verifyCode({
      //验证验证码
      phone: phone.value,
      captcha: code.value,
    });
    // console.log(res);
    if (res.data) {
      console.log("验证成功");
      const res = await registerApi({
        username: username.value,
        phone: phone.value,
        password: password.value,
      });
      console.log(res);
      if (res.data.code === 200) {
        console.log(res.data.message);
        const userList = res.data.result;
        console.log(userList);
        router.push({
          path: "/login",
          query: userList.phone,
        });
      }
    }
  };
  // const onSubmit = (values) => {
  //   console.log(values);
  // };
  //密码登录是否可见
  const iconClick = () => {
    flag.value = !flag.value;
    console.log(flag.value);
    !flag.value
      ? (passwordVisibile.value = "password")
      : (passwordVisibile.value = null);
  };
  const iconClickTwo = () => {
    flagTwo.value = !flagTwo.value;
    console.log(flagTwo.value);
    !flagTwo.value
      ? (passwordVisibileTwo.value = "password")
      : (passwordVisibileTwo.value = null);
  };
  const searchClick = () => {
    console.log("进入搜索框");
  };
  const ellipsisClick = () => {
    console.log("111");
  };
  const actions = [
    { text: "选项一", icon: "add-o" },
    { text: "选项二", icon: "music-o" },
    { text: "选项三", icon: "more-o" },
  ];
  </script>
  
  <style lang="scss">
  .search {
    margin-right: 50px;
  }
  
  .twoDiv {
    display: flex;
    justify-content: space-between;
  }
  
  .btnbox {
    display: flex;
    justify-content: space-evenly;
  }
  </style>
  